<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button> -->
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="订单号" v-model="filters['refund.p_order_no']"></el-input>

      <el-select v-model="filters['refund.refund_type']" clearable placeholder="退款方式">
        <el-option
          v-for="(item,value) in refundTypeData"
          :key="value"
          :label="item" 
          :value="value">
        </el-option>
      </el-select>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-if="~accessable.indexOf('order:refund_money_export')" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :height="tableHeight" :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="60">
      </el-table-column>



      <el-table-column prop="orderNo" align="center" label="订单号" width="250">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="nickname" align="center" label="微信昵称" width="140">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsTitle" align="center" label="商品名称" width="140">
        <template slot-scope="scope">
          <span>{{scope.row.goodsTitle}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="refundAmount" align="center" label="退款金额（元）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.refundAmount}}￥</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundPoints" align="center" label="退积分" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.refundPoints}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="下单时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="orderStatus" align="center" label="订单状态" width="160">
        <template slot-scope="scope">
            <el-tag :type="scope.row.orderStatus|statustagFilter"><span>{{scope.row.orderStatus|orderStatus}}</span></el-tag>          
        </template>
      </el-table-column>

      <el-table-column prop="payTime" align="center" label="支付时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.payTime|parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" label="申请时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.applyRefundTime}}</span>
        </template>
      </el-table-column>


      <el-table-column width="120" prop="status" align="center" label="处理状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statustagFilter">{{scope.row.status|statusFilter}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="refundTime" align="center" label="退款时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.refundTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rejectReason" align="center" label="拒绝理由" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.rejectReason}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="telephone" align="center" label="联系电话" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.telephone}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundType" align="center" label="退款方式" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.refundType|refundTypeFilterTag">{{scope.row.refundType|refundTypeFilter}}</el-tag>
        </template>
      </el-table-column>

  
      <el-table-column prop="imgSrcs" align="center" label="图片" width="180">
        <template slot-scope="scope">
            <div v-if="scope.row.imgSrcs">
              <img @click="showBigImage(img)" v-for="img in scope.row.imgSrcs.split(',')" :src="img|absUrl" :key="img" style="max-width:100px;"/>
          </div>
          
        </template>
      </el-table-column>


      <el-table-column align="center" label="操作" width="280" class-name="small-padding">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.status==1" :loading="scope.row.isStopChangingState" type="danger" @click="stopUser(scope.row)">拒绝退款</el-button> 
          <el-button size="mini" v-if="scope.row.status==1" :loading="scope.row.isStartChangingState" type="primary" @click="startUser(scope.row)">同意退款</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>


    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

     <el-dialog :visible.sync="imageDialogVisible" :append-to-body="true">
      <div class="text-center">
        <img :src="dialogImageUrl" alt="" style="max-width:100%;"/>
      </div>
      
    </el-dialog>  
  </div>
</template>

<script>
let statusFilter = {
  "0": "已取消",
  "1": "退款申请",
  "10": "退款处理中",
  "15": "金额退款成功，积分退款失败",
  "16": "积分退款成功，金额退款失败",
  "20": "已退款",
  "21": "退款失败",
  "30": "拒绝退款申请"
};
let statustagFilter = ["success", "danger", "info", "warning"];

export default {
  data() {
    return {
      tableHeight:0,
      total: 0,
      dialogImageUrl: "",
      imageDialogVisible: false,
      temp: {
        id: "",

        orderNo: "",

        userId: "",

        refundAmount: "",

        status: ""
      },

      userIdOptions: [],
      refundTypeData: ["退款", "退货"],

      statusFilter: statusFilter,

      rules: {
        orderNo: [
          {
            required: true,
            message: "订单号不能为空",
            trigger: "change"
          }
        ],

        userId: [
          {
            required: true,
            message: "会员名不能为空",
            trigger: "change"
          }
        ],

        refundAmount: [
          {
            required: true,
            message: "退款金额（元）不能为空",
            trigger: "change"
          }
        ],

        status: [
          {
            required: true,
            message: "处理状态不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.init("refund", 1).loadData();

    this.combOptions("user").then(info => {
      this.userIdOptions = info;
    });
    this.tableHeight = window.innerHeight - 300;
  },

  filters: {
    refundTypeFilter(refundType) {
      return ["退款", "退货"][refundType];
    },
    refundTypeFilterTag(refundType) {
      return ["success", "info"][refundType];
    },
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    }
  },
  methods: {
    showBigImage(img) {
      this.dialogImageUrl = img;
      this.imageDialogVisible = true;
    },
    stopUser(row) {
      this.$prompt("确定拒绝退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.+/,
        inputErrorMessage: "请输入拒绝理由"
      }).then(({ value }) => {
        this.$set(row, "isStopChangingState", true);
        this.$post("/admin/order_record/reject_refund", {
          refundId: row.id,
          rejectReason: value
        })
          .then(res => {
            this.$set(row, "isStopChangingState", false);
            // row.state = 0;
            this.$$notify();
            this.loadData();
          })
          .catch(_ => {
            this.$set(row, "isStopChangingState", false);
          });
      });
    },
    startUser(row) {
      this.$confirm("确定同意退款吗？", "提示")
        .then(_ => {
          this.$set(row, "isStartChangingState", true);
          this.$post("/admin/order_record/agree_refund", {
            refundId: row.id
          })
            .then(res => {
              this.$set(row, "isStartChangingState", false);
              // row.state = 1;
              this.loadData();
              this.$$notify();
            })
            .catch(_ => {
              this.$set(row, "isStartChangingState", false);
            });
        })
        .catch(_ => {});
    },
    exportExcelFile() {
      this.exportExcel({
        title: "退款申请单",
        fields: [
          {
            field: "orderNo",
            title: "订单号"
          },
          {
            field: "nickname",
            title: "微信昵称"
          },
          {
            field: "goodsTitle",
            title: "商品名称"
          },
          {
            field: "refundAmount",
            title: "退款金额（元）"
          },
          {
            field: "refundPoints",
            title: "退积分"
          },
          {
            field: "createTime",
            title: "下单时间"
          },
          {
            field: "orderStatus",
            title: "订单状态",
            valueMap: {
              "0": "待付款",
              "1": "待发货",
              "2": "待收货",
              "4": "待评论",
              "8": "已评论",
              "16": "已退款",
              "32": "退款处理中",
              "128": "退款申请中",
              "256": "退款拒绝",
              "64": "退款失败",
              "-1": "已取消",
              "99": "已取消"
            }
          },
          {
            field: "payTime",
            title: "支付时间"
          },
          {
            field: "applyRefundTime",
            title: "申请时间"
          },
          {
            field: "status",
            title: "处理状态",
            valueMap: statusFilter
          },
          {
            field: "refundTime",
            title: "退款时间"
          },

          {
            field: "rejectReason",
            title: "拒绝理由"
          },
          {
            field: "telephone",
            title: "联系电话"
          },

          {
            field: "refundType",
            title: "退款方式",
            valueMap: ["退款", "退货"]
          }
        ]
      }).then(info => {
        this.openWin(info);
      });
    }
  }
};
</script>
